<template>
	<view class="bottom-nav">
		<view class="placeholder"></view>
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in nav" :key="index" @click="to(item.path)">
				<text :class="checkedIndex===index?item.iconChecked:item.icon"></text>
				<view :class="checkedIndex===index?'checked':'text'">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bottom-nav",
		props: {
			checkedIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				nav: [{
					path: "/pages/index/index",
					icon: 'iconfont icon-default-home',
					iconChecked: 'iconfont icon-checked-home',
					text: '首页'
				}, {
					path: "/pages/type/type",
					icon: 'iconfont icon-default-type',
					iconChecked: 'iconfont icon-checked-type',
					text: '分类'
				}, {
					path: "/pages/cart/cart",
					icon: 'iconfont icon-default-cart',
					iconChecked: 'iconfont icon-checked-cart',
					text: '购物车'
				}, {
					path: "/pages/mine/mine",
					icon: 'iconfont icon-default-mine',
					iconChecked: 'iconfont icon-checked-mine',
					text: '我的'
				}]
			};
		},
		methods: {
			to(url) {
				this.$tool.pageTo(url)
			}
		}
	}
</script>

<style lang="scss">
	$color-checked:red;

	@font-face {
		font-family: "iconfont";
		/* Project id  */
		src: url('bottomnav.ttf?t=1648201758341') format('truetype');
	}

	.placeholder {
		height: 150rpx;
	}

	.icon-checked-mine:before {
		content: "\e798";
		color: $color-checked;
	}

	.icon-default-mine:before {
		content: "\e799";
	}

	.icon-checked-home:before {
		content: "\e78e";
		color: $color-checked;
	}


	.icon-default-home:before {
		content: "\e796";
	}

	.icon-default-type:before {
		content: "\e79a";
	}

	.icon-checked-type:before {
		content: "\e79b";
		color: $color-checked;
	}

	.icon-default-cart:before {
		content: "\e79d";
	}

	.icon-checked-cart:before {
		content: "\e79e";
		color: $color-checked;
	}

	.bottom-nav {
		.nav {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(100rpx + env(safe-area-inset-bottom));
			padding-bottom: env(safe-area-inset-bottom);
			// padding-top: env(safe-area-inset-top);
			// padding-top: constant(safe-area-inset-top);
			background-color: #FFFFFF;
			display: flex;
			align-items: center;

			.nav-item {
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 13rpx;
				}

				.checked {
					color: red;
					font-size: 13rpx;
				}
			}
		}
	}
</style>
